<style>
    form {
        position: relative;
    }

    .form-input .upload a{
        width: 80px;
        height: 36px;
        background-color: #2E9FFF;
        line-height: 36px;
        padding: 0;
        border-color: #2E9FFF;
        border-top-right-radius: 8px!important;
        border-bottom-right-radius: 8px!important;
    }

    .preview {
        display: block;
        height: 72px;
        width: 196px;
        position: relative;
        background-color: #f7f7f7;
    }

    .logo-preview {
        display: block;
        height: 72px;
    }

    .logo-preview img {
        height: 100%;
    }

    .preview .upload-preview-tip {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        margin-top: 30px;
        width: 196px;
        text-align: center;
        color: #bbbbbb;
        font-size: 12px;
        z-index: 2;
    }

    .preview img {
        position: absolute;
        left: 0;
        top: 0;
        height: 72px;
        display: block;
        z-index: 3;
    }

    .submit-btn {
        padding: 0;
        height: 32px;
        line-height: 32px;
        width: 66px;
        border-radius: 16px;
        font-size: 13px;
        color: #fff;
        background-color: #7571f9;
        border: 1px solid #7571f9;
    }
</style>

<form method="post" return="{:url('platform/storage/index')}" action="{:url('platform/storage/index')}" id="storage" class="auto-submit-form auto-form">
    <div class="card-body">
        <div style="margin-bottom: 24px;"><b>上传配置（存储客服系统上传的图片或文件）</b></div>
            <div class="form-group row">
                <div class="form-group-label col-sm-4 text-right">
                    <label class="col-form-label">限制图片大小（MB）</label>
                </div>
                <div class="col-sm-6">
                    <input class="form-control mb-3" name="image_size"
                           value="{$size['image_size']}">
                </div>
            </div>

            <div class="form-group row">
                <div class="form-group-label col-sm-4 text-right">
                    <label class="col-form-label">限制文件大小（MB）</label>
                </div>
                <div class="col-sm-6">
                    <input class="form-control mb-3" name="file_size"
                           value="{$size['file_size']}">
                </div>
            </div>

            <div class="form-group row">
                <div class="form-group-label col-sm-4 text-right">
                    <label class="col-form-label">上传存储方式</label>
                </div>
                <div class="col-sm-6">
                    <select class="form-control" name="storage_type" v-model="storage_type">
                        {if condition="in_array('Local',$permission)"}
                        <option value="1">无（当前服务器）</option>
                        {/if}
                        {if condition="in_array('AliOss',$permission)"}
                        <option value="2">阿里云OSS</option>
                        {/if}
                        {if condition="in_array('TxCos',$permission)"}
                        <option value="3">腾讯云COS</option>
                        {/if}
                        {if condition="in_array('Qiniu',$permission)"}
                        <option value="4">七牛云存储</option>
                        {/if}
                    </select>
                </div>
            </div>

            <div v-bind:hidden="storage_type!='2'?true:false" class="form-group row">
                <div class="form-group-label col-sm-4 text-right">
                    <label class="col-form-label">阿里云OSS配置</label>
                </div>
                <div class="col-sm-6">
                    <label>存储空间名称（Bucket）</label>
                    <input class="form-control mb-3" name="AliOss[bucket]"
                           value="{$AliOss['bucket']}">
                    <div class="text-muted fs-sm mb-3">请设置存储空间为公共读</div>
                    <label>Endpoint（或自定义域名）</label>
                    <input class="form-control" name="AliOss[domain]"
                           value="{$AliOss['domain']}">
                    <div class="text-muted fs-sm mb-3">例子：http://oss-cn-hangzhou.aliyuncs.com <span>或</span> <span style="color: #ff8576">http://mydomain.com</span></span></div>
                    <label>是否开启自定义域名</label>
                    <div>
                        <label class="radio-label">
                            <input id="radio1"
                                   value="0" {if condition="$AliOss['cname'] == 0"} checked {/if}
                            name="AliOss[cname]" type="radio" class="custom-control-input">
                            <span class="label-icon"></span>
                            <span class="label-text">否</span>
                        </label>
                        <label class="radio-label">
                            <input id="radio2"
                                   value="1" {if condition="$AliOss['cname'] == 1"} checked {/if}
                            name="AliOss[cname]" type="radio" class="custom-control-input">
                            <span class="label-icon"></span>
                            <span class="label-text">是</span>
                        </label>
                    </div>
                    <label>Access Key ID</label>
                    <input class="form-control mb-3" name="AliOss[access_key]"
                           value="{$AliOss['access_key']}">
                    <label> Access Key Secret</label>
                    <input class="form-control mb-3" name="AliOss[secret_key]"
                           value="{$AliOss['secret_key']}">
                </div>
            </div>

            <div v-bind:hidden="storage_type!='3'?true:false" class="form-group row">
                <div class="form-group-label col-sm-4 text-right">
                    <label class="col-form-label">腾讯云COS配置</label>
                </div>
                <div class="col-sm-6">
                    <label>存储空间名称（Bucket）</label>
                    <input class="form-control mb-3" name="TxCos[bucket]"
                           value="{$TxCos['bucket']}">
                    <label>所属地域（Region）</label>
                    <input class="form-control mb-3" name="TxCos[region]"
                           value="{$TxCos['region']}">
                    <label>SecretId</label>
                    <input class="form-control mb-3" name="TxCos[secret_id]"
                           value="{$TxCos['secret_id']}">
                    <label>SecretKey</label>
                    <input class="form-control mb-3" name="TxCos[secret_key]"
                           value="{$TxCos['secret_key']}">
                </div>
            </div>

            <div v-bind:hidden="storage_type!='4'?true:false" class="form-group row">
                <div class="form-group-label col-sm-4 text-right">
                    <label class="col-form-label">七牛云存储配置</label>
                </div>
                <div class="col-sm-6">
                    <label>存储空间名称（Bucket）</label>
                    <input class="form-control mb-3" name="Qiniu[bucket]"
                           value="{$Qiniu['bucket']}">
                    <label>绑定域名（或测试域名）</label>
                    <input class="form-control" name="Qiniu[domain]"
                           value="{$Qiniu['domain']}">
                    <div class="text-muted fs-sm mb-3">例子：abstehdsdw.bkt.clouddn.com，<span class="text-danger">结尾不需要/</span></div>
                    <label>AccessKey（AK）</label>
                    <input class="form-control mb-3" name="Qiniu[access_key]"
                           value="{$Qiniu['access_key']}">
                    <label>SecretKey（SK）</label>
                    <input class="form-control mb-3" name="Qiniu[secret_key]"
                           value="{$Qiniu['secret_key']}">
                </div>
            </div>

            <div class="form-group row">
                <div class="form-group-label col-sm-4 text-right">
                </div>
                <div class="col-sm-6">
                    <a class="btn btn-primary auto-form-btn" href="javascript:">保存</a>
                </div>
            </div>

    </div>
</form>
<script>
    var app = new Vue({
        el: "#storage",
        data: {
            storage_type: "{$type}",
        },
    });
</script>